/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  FlatList,
  Image,

} from 'react-native';
var ItemHeight =80;
var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');
export default class HTAllAnchorScene extends Component {
  static navigationOptions = ({navigation})=>({
    header: <View></View>,
    headerLeft:(
      <TouchableOpacity
        onPress={
          ()=>navigation.goBack()
        }
        >
          <Text style={{color:'blue',marginLeft:20}}>返回</Text>

        </TouchableOpacity>
    ),

    headerTitle:navigation.state.params.anchorList,//'主播列表',//navigate.AllAnchor.anchorList, //'主播列表',//this.navigation.state.params.AllAnchor.allAnchor,

    headerStyle:{backgroundColor:'#c6dbb8'}

  })



  constructor(props){
    super(props);
    this.state = {
      dataSource:[],
      page:0,
      refreshing:false,
    }
  }

  _flatList

  componentWillMount(){
    console.log('./././././.=======a'+this.state.page);

        this.fetchData('http://yiapi.xinli001.com/fm/diantai-find-list.json?key=c0d28ec0954084b4426223366293d190&rows=10&offset='+this.state.page);
      }

    fetchData = (url) => {
        console.log('====='+url);
        fetch(url,{
          method:'GET',
          headers:{
           'Content-Type': 'application/json'
        },
          // body:JSON.stringify({
          //   // "page":index,
          // })
        }).then((response)=>response.json())
        .then((responseData)=>{

          // let rowData = Array.from(responseData.data.articles);
          console.log(responseData.data);
            this.setState({
              dataSource:this.state.dataSource.concat(responseData.data),
              // dataSource:(responseData.data),
              //  dataSource:this.state.dataSource.concat(responseData.data.articles),
              refreshing:false,

            });
            // dataSource:this.state.dataSource.concat(this.state.dataSource)

          });

      }



      _archorOnRefresh =()=>{
        this.setState({
           page:this.state.page+=20,
          refreshing:true,
        });
        console.log('./././././.=======b'+this.state.page);
        this.fetchData('http://yiapi.xinli001.com/fm/diantai-find-list.json?key=c0d28ec0954084b4426223366293d190&rows=10&offset='+this.state.page);
      }

      _anchorOnEndReached =()=>{
        this.setState({
           page:this.state.page+=20,
          refreshing:true,
        });
        console.log('./././././.=======b'+this.state.page);
        this.fetchData('http://yiapi.xinli001.com/fm/diantai-find-list.json?key=c0d28ec0954084b4426223366293d190&rows=10&offset='+this.state.page);
      }

      _archorSeparate =()=>{
        return <View style ={{height:1,backgroundColor:'#e2dbdd',width:width-20,}}/>

      }
      _archorKeyExtractor = (item, index) => item.id;


      _archorRenderItem =({item,index})=>{
        console.log(item.title);
        return(
          <TouchableOpacity activeOpacity ={0.5} >
          <View  style={styles.cellStyle}>
            <View style = {styles.lefViewStyle}>
            <Image source={{uri:item.cover}} style={styles.leftImageStyle}/>
            </View>
              <View style = {styles.rightInViewStyle}>
                <Text style={{color:'#a2a4a0'}}>{item.fmnum+'个节目'}</Text>
              </View>
            </View>
        </TouchableOpacity>
        );


      }
      _listEmptyComponent=()=>{
        return <View style={{width:375,height:300,backgroundColor:'rgb(87, 237, 101)'}}></View>

      }

      anchorFMHeaderView = () => {
        return(
          <View style={styles.headerTopHeaderViewStyle}>
            <TouchableOpacity onPress={()=>this.props.navigation.goBack()}>
              <Image source={require('../../img/findicon/back.png')} style={{width:24,height:24,}}/>
            </TouchableOpacity>
            <Text>{this.props.navigation.state.params.anchorList}</Text>
            <Image source={require('../../img/findicon/littlePlaying1.png')} style={{width:17,height:17,}}/>
          </View>
        );
      }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerViewStyle
        }>
          {this.anchorFMHeaderView()}
          <View style={styles.bottomViewStyle}></View>
        </View>
        <FlatList
          ref={(flatList)=>this._flatList = flatList}
          ItemSeparatorComponent = {this._archorSeparate}//分割线组件，
          keyExtractor={this._archorKeyExtractor}
          renderItem = {this._archorRenderItem}
          data={this.state.dataSource}
          ListEmptyComponent={this._listEmptyComponent}
          // horizontal={true}
          // numColumns ={cols}//列数 组件内元素必须是等高的,无法支持瀑布流布局
          // columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:0}}//numColumns大于1时，设置每行的样式
          getItemLayout={(data,index)=>({length: ItemHeight, offset: (ItemHeight+20) * index, index})}
           onEndReached={this._anchorOnEndReached}
           onEndReachedThreshold ={0}
          onRefresh = {this._archorOnRefresh}//在视图开始刷新时调用。指定一个刷新方法，在下拉开始时调用。
          refreshing = {this.state.refreshing}//视图是否应该在刷新时显示指示器
          onViewableItemsChanged={({viewableItems,changed})=>{
          // console.log(changed);
          }}//当一个新的Item渲染或者隐藏 的时候调用此方法。

          ></FlatList>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerViewStyle:{
    backgroundColor:'transparent',
    height:64,
    width:width,
    flexDirection:'column',
    justifyContent:'flex-end',
  },
  headerTopHeaderViewStyle:{
    backgroundColor:'transparent',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginLeft:10,
    marginRight:10,
    marginBottom:10,
  },
  bottomViewStyle:{
    backgroundColor:'#6b6b6b',
    width:width,
    height:.5,
    marginBottom:1,
  },
  cellStyle:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    // width:width,
    // height:60,
  },
  lefViewStyle:{
    width:80,
    height:80,
    backgroundColor:'transparent',
    alignItems:'center',
    justifyContent:'center',
  },
  leftImageStyle:{
    width:60,
    height:60,
    borderRadius:30,

  },
  rightInViewStyle:{
    width:100,
    height:50,
    backgroundColor:'transparent',
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center',
    marginRight:0,
  },
});
